<template>
  <div>
    <div class="importEmissionSource">
      <!-- 标题 -->
      <div class="importEmissionSource-title">导入排放源</div>


      <!-- 下载模版，导入数据 -->
      <div class="importEmissionSource-excel">
        <div class="importEmissionSource-excel-part">
          <div class="importEmissionSource-excel-part-1-title">1.下载排放源模版，根据模版录入数据</div>
          <el-button class="importEmissionSource-excel-part-1-btn" size="small">下载模版</el-button>
        </div>
        <div class="importEmissionSource-excel-part">
          <el-button size="small">导入数据</el-button>
        </div>
      </div>


      <!-- 表格-导入历史 -->
      <div class="importEmissionSource-history">
        <div class="importEmissionSource-history-title">导入历史</div>
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>


    </div>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'

export default {
  name: 'importEmissionSource',
  components: {
    NormalTable,
  },
  data() {
    return {
      tableData: [
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },
        {
          fileName: '零售行业排放源1.xls',
          totalNum: '100',
          exportNum: '-',
          errorNum: '-',
          status: '导入中',
          operatePerson: '张三',
          exportTime: '2022-02-10 21:30:57'
        },

      ],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '下载',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "文件名称",
          width: 200
        },
        {
          prop: "totalNum",
          label: "总条数"
        },
        {
          prop: "exportNum",
          label: "导入条数"
        },
        {
          prop: "errorNum",
          label: "异常条数"
        },
        {
          prop: "status",
          label: "状态"
        },
        {
          prop: "operatePerson",
          label: "操作人"
        },
        {
          prop: "exportTime",
          label: "导入时间",
          width: 200
        }
      ],

    }
  },
  methods: {

    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {

      }
    },
    // 分页点击事件
    changePage() {

    }
  }
}
</script>

<style lang="less" scoped>
.importEmissionSource {

  height: 680px;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .importEmissionSource-title {
    font-size: 16px;
    font-weight: bold;
  }

  // 模版
  .importEmissionSource-excel {
    display: flex;

    .importEmissionSource-excel-part {
      flex: 1;
      background-color: #fafafa;
      margin: 10px 20px;
      height: 100px;
      padding: 20px;

      .importEmissionSource-excel-part-1-title {
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
  }

  // 下载历史
  .importEmissionSource-history {
    .importEmissionSource-history-title {
      font-size: 14px;
    }
  }
}
</style>
